<template>
  <div>
    <div class="ddd" v-if="authStatus">{{ authStatus }}</div>
    <div class="aabb1">
      <div class="disss1">平台遵守用户《个人信息保护》《隐私和数据规范》</div>
    </div>
    <div class="aa">
      <div class="aa1">{{head}}</div>
      <div class="aa2"><img class="aa4" :src="pp1" @click="uploadPic1()"/></div>
    </div>
    <div class="aa">
      <div class="aa1">{{idc1}}</div>
      <div class="aa2"><img class="aa4"  :src="pp2" @click="uploadPic2()"/></div>
    </div>
    <div class="aa">
      <div class="aa1">{{idc2}}</div>
      <div class="aa2"><img class="aa4"  :src="pp3" @click="uploadPic()"/></div>
    </div>
    <div class="aabb" v-if="nocli == 0">
      <div class="aa5">*手机号</div>
      <div class="aa3"><textarea class="inpcls" v-model.trim="mobile"/></div>
    </div>
    
    <div class="aabb" v-if="nocli == 0">
      <div class="aa5">*验证码</div>
      <div class="aa6"><textarea class="inpcls" v-model.trim="code"/></div>
      <div class="aa7" @click="sendCode()">{{ time }}</div>
    </div>

    <div class="aabb">
      <checkbox-group class="radio-group" @change="checkChange">
        <checkbox class="checkbox" value="true" :checked="isChecked"><span class="ssb">{{protect}}</span></checkbox>
      </checkbox-group>
    </div>
    
    


    <div class="ww1">
      {{tip1}}<br>
      {{tip2}}<br>
      {{tip3}}<br>
      {{tip4}}<br>
    </div>
    <div class="divcls" @click="applyAuth()">{{subtext}}</div>
  </div>

</template>

<script>
import card from '@/components/card'
import { requestPost } from '@/utils/index'
export default {
  data () {
    return {
      pp1: '/static/images/tp0.png',
      pp2: '/static/images/tp0.png',
      pp3: '/static/images/tp0.png',
      showOnce: true,
      authStatus: '',
      nocli: 1,
      mobile: '',
      code: '',
      time: '发送',
      isClick: true,
      head: '商城图标',
      idc1: '主页图片',
      idc2: '商品图片',
      tip1: '',
      tip2: '',
      tip3: '',
      tip4: '',
      protect: '*同意平台获取个人数据仅用于认证审核',
      allow: [],
      isChecked: true,
      subtext: '提交'
    }
  },
  onPullDownRefresh () {
    wx.stopPullDownRefresh()
  },
  onShow () {
    this.isChecked = this.allow[0]
    if (mpvue.getStorageSync('co')) {
      this.authStatu()
      if (this.showOnce) {
        // this.tip1 = '* 身份证背景纯色,不可有文字'
        // this.tip2 = '* 竖屏拍摄,手机与身份证保持平行'
        // this.tip3 = '* 图片清晰,素颜,大小不超过1M(1024KB)'
        // this.tip4 = '* 若提交失败请检查"身份证正面"照片是否清晰'
        this.tip1 = ''
        this.tip2 = ''
        this.tip3 = ''
        this.tip4 = ''
        this.protect = '允许平台获取我个人数据仅用于认证审核'
        this.subtext = '提交认证'
        this.head = '*人脸头像'
        this.idc1 = '*身份证正面'
        this.idc2 = '*身份证反面'
        this.pp1 = 'https://mp.kxkj.site/jcimg/camera.jpg'
        this.pp2 = 'https://mp.kxkj.site/jcimg/fm.png'
        this.pp3 = 'https://mp.kxkj.site/jcimg/zm.png'
        this.showOnce = false
      }
    }
    // this.isClick = true
    // let interval = this.interval
    // clearInterval(interval)
    // this.time = '发送'
  },
  onUnload () {
    // wx.clearStorageSync()
    // mpvue.removeStorageSync('token')
  },
  components: {
    card
  },
  methods: {
    showMyToast (title, duration, mask) {
      wx.showToast({
        title: title,
        icon: 'none',
        duration: duration,
        mask: mask
      })
    },
    checkChange (e) {
      this.allow = e.target.value
    },
    sendCode () {
      if (this.nocli === 1) {
        return
      }
      if (!this.isClick) {
        return
      }
      // wx.showLoading({
      //   title: '',
      //   mask: true
      // })
      if (this.mobile === '') {
        wx.showToast({
          title: '手机号必填',
          icon: 'none',
          duration: 2000,
          mask: true
        })
        return
      }
      var data = {
        'mobile': this.mobile,
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/getVerificationCode', data, 'POST').then(function (value) {
        // console.log(value)
        // wx.hideLoading()
        if (value.code === 0) {
          that.showMyToast('发送成功', 1500, true)
          that.isClick = false
          let times = 60
          that.time = times + 's'
          that.interval = setInterval(() => {
            times--
            that.time = times + 's'
            if (times < 0) {
              that.time = '发送'
              that.isClick = true
              clearInterval(that.interval)
            }
          }, 1000)
        } else {
          that.showMyToast(value.message, 2000, true)
        }
      }, function (value) {
        that.showMyToast(value, 2000, true)
      })
    },
    authStatu () {
      var data = {
        'userId': mpvue.getStorageSync('userId'),
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/authStatus', data, 'POST').then(function (value) {
        if (value.code === 0) {
          if (value.data === '0') {
            that.authStatus = '您还未实名认证'
            that.nocli = 0
          }
          if (value.data === '1') {
            that.authStatus = '您已实名认证'
            that.nocli = 1
          }
          if (value.data === '2') {
            that.authStatus = '审核需1-2个工作日'
            that.nocli = 1
          }
          if (value.data === '3') {
            that.authStatus = '未通过审核,请重新申请'
            that.nocli = 0
          }
        } else {
          that.showMyToast(value.message, 2000, true)
        }
      }, function (value) {
        that.showMyToast(value, 2000, true)
      })
    },
    uploadPic1 () {
      // 头像照片
      if (this.nocli === 1) {
        return
      }
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success (res) {
          wx.showLoading({
            title: '上传中',
            mask: true
          })
          // tempFilePath可以作为img标签的src属性显示图片
          const pic = res.tempFilePaths
          wx.uploadFile({
            url: mpvue.getStorageSync('requestUrl') + '/file/uploadPicture',
            filePath: pic[0],
            name: 'file',
            formData: {
              file: '12312'
            },
            success (res) {
              let a = JSON.parse(res.data)
              if (a.code !== 0) {
                wx.hideLoading()
                that.showMyToast('上传失败', 2000, false)
                return
              }
              that.pp1 = a.data
              wx.hideLoading()
            },
            fail (res) {
              wx.hideLoading()
              that.showMyToast('上传失败', 2000, false)
            }
          })
        }
      })
    },
    uploadPic2 () {
      // 身份证正面照片
      if (this.nocli === 1) {
        return
      }
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          wx.showLoading({
            title: '上传中',
            mask: true
          })
          // tempFilePath可以作为img标签的src属性显示图片
          const pic = res.tempFilePaths
          wx.uploadFile({
            url: mpvue.getStorageSync('requestUrl') + '/file/uploadIdCard',
            filePath: pic[0],
            name: 'file',
            formData: {
              userId: mpvue.getStorageSync('userId')
            },
            header: {
              token: mpvue.getStorageSync('token')
            },
            success (res) {
              let a = JSON.parse(res.data)
              if (a.code !== 0) {
                wx.hideLoading()
                that.showMyToast('上传失败', 2000, false)
                return
              }
              that.pp2 = a.data
              wx.hideLoading()
            },
            fail (res) {
              wx.hideLoading()
              that.showMyToast('上传失败', 2000, false)
            }
          })
        }
      })
    },
    uploadPic () {
      // 身份证反面照片
      if (this.nocli === 1) {
        return
      }
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          wx.showLoading({
            title: '上传中',
            mask: true
          })
          // tempFilePath可以作为img标签的src属性显示图片
          const pic = res.tempFilePaths
          wx.uploadFile({
            url: mpvue.getStorageSync('requestUrl') + '/file/uploadPicture',
            filePath: pic[0],
            name: 'file',
            formData: {
              file: '12312'
            },
            success (res) {
              let a = JSON.parse(res.data)
              if (a.code !== 0) {
                wx.hideLoading()
                that.showMyToast('上传失败', 2000, false)
                return
              }
              that.pp3 = a.data
              wx.hideLoading()
            },
            fail (res) {
              wx.hideLoading()
              that.showMyToast('上传失败', 2000, false)
            }
          })
        }
      })
    },
    applyAuth () {
      if (this.nocli === 1) {
        return
      }
      console.log(this.allow)
      if (this.allow.length === 0) {
        this.showMyToast('获取个人信息需您同意', 2000, false)
        return
      }
      if (!mpvue.getStorageSync('co')) {
        this.pp1 = '/static/images/tp0.png'
        this.pp2 = '/static/images/tp0.png'
        this.pp3 = '/static/images/tp0.png'
        this.mobile = ''
        this.code = ''
        this.showMyToast('提交成功', 2000, false)
        return
      }
      if (this.pp1 === '') {
        this.showMyToast('个人照片未上传', 2000, false)
        return
      }
      if (this.pp2 === '') {
        this.showMyToast('身份证正面未上传', 2000, false)
        return
      }
      if (this.pp3 === '') {
        this.showMyToast('身份证反面未上传', 2000, false)
        return
      }
      if (this.mobile === '') {
        this.showMyToast('请填写手机号', 2000, false)
        return
      }
      if (this.code === '') {
        this.showMyToast('请填写手机验证码', 2000, false)
        return
      }
      wx.showLoading({
        title: '上传中',
        mask: true
      })
      var data = {
        'userId': mpvue.getStorageSync('userId'),
        'head': this.pp1,
        'cardA': this.pp2,
        'cardB': this.pp3,
        'mobile': this.mobile,
        'code': this.code,
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/applyAuth', data, 'POST').then(function (value) {
        if (value.code === 0) {
          that.pp1 = 'https://mp.kxkj.site/jcimg/camera.jpg'
          that.pp2 = 'https://mp.kxkj.site/jcimg/fm.png'
          that.pp3 = 'https://mp.kxkj.site/jcimg/zm.png'
          that.mobile = ''
          that.code = ''
          that.nocli = 1
          wx.hideLoading()
          that.showMyToast('已提交申请', 2000, false)
        } else {
          wx.hideLoading()
          that.showMyToast(value.message, 2000, false)
        }
      }, function (value) {
        wx.hideLoading()
        that.showMyToast(value, 2000, false)
      })
    }
  }
}
</script>

<style scoped>

.disss1{
  width: 95%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: rgb(146, 146, 146);
  margin: 0 auto;
  float: left;
  text-align: center;
  
}
.ssb{
  font-size: 15px;
  color: rgb(146, 146, 146);
}
.inpcls{
  width:100%;
  height: 50px;

}
.ddd{
  background-color: rgb(133, 210, 255);
  color:rgb(255, 255, 255);
  font-size: 22px;
  height: 40px;
  width: 100%;
  text-align: center;
  line-height: 40px;
}
.ww1{
  width: 95%;
  height: 20px;
  margin: 0 auto;
  /* margin-top: 20px; */
  color: red;
  font-size: 16px;
}
.aa{
  width: 95%;
  height: 150px;
  margin: 0 auto;
  margin-top: 20px;
}
.aabb{
  width: 95%;
  height: 40px;
  margin: 0 auto;
  margin-top: 20px;
}
.aabb1{
  width: 95%;
  height: 20px;
  margin: 0 auto;
  margin-top: 10px;
}
.aa1{
  width: 25%;
  height: 150px;
  float: left;
  font-size: 15px;
  color: rgb(146, 146, 146);
}
.aa2{
  width: 70%;
  height: 150px;
  float: left;
  border: 1px solid rgb(209, 209, 209);
}
.aa3{
  width: 70%;
  height: 40px;
  float: left;
}
.aa6{
  width: 40%;
  height: 40px;
  float: left;
}
.inpcls{
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(209, 209, 209);
}
.aa7{
  width: 25%;
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 5%;
  background-color: rgb(0, 163, 87);
  border-radius: 5px 5px 5px 5px;
  text-align: center;
  font-size: 18px;
  color: white;
}
.aa5{
  width: 25%;
  height: 40px;
  float: left;
  font-size: 15px;
  color: rgb(146, 146, 146);
}
.aa4{
  width: 200px;
  height: 130px;
  margin-top: 10px;
  margin-left: 15px;
}

.divcls{
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: rgb(14, 14, 22);
  background-color: #FEF55A;
}
</style>
